<!--
/**
 * 菜单 列表页 JS 脚本
 * @author 李方捷 , leefangjie@qq.com
 * @since 2021-06-08 10:22:55
 * @version
 */
 -->
 <!DOCTYPE html>
<html style="background-color: #FFFFFF">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8"/>
    <title th:text="${lang.translate('员工对话框')}">员工对话框</title>
    <link th:if(theme.ico!="null") rel="shortcut icon" th:href="${theme.ico}" type="image/vnd.microsoft.icon">
    <link th:if(theme.ico!="null") rel="icon" th:href="theme.ico" type="image/vnd.microsoft.icon">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" th:href="'/assets/libs/layui/css/layui.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/css/admin.css" th:href="'/assets/css/admin.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/assets/libs/toast/css/toast.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/foxnic-web.css" th:href="'/assets/css/foxnic-web.css?'+${cacheKey}"/>
    <link href="/assets/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/assets/libs/material-design-webfont/css/material-design-icons-min.css" rel="stylesheet">
    <style>
        .top-container {
            display: -webkit-flex; /* Safari */
            display: flex;
            width: 100%;
            align-items:top;
        }
        .source-area {
            flex:1;
            border-right: 1px #e6e6e6 solid;
        }

        .result-area {
            width: 480px;
            background-color: #ffffff;
            border-left: 1px #e6e6e6 solid;
        }

        .ztree li span.button.icon_com_ico_docu{margin-right:2px; background: url(/assets/icons/gongsi.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_com_ico_close{margin-right:2px; background: url(/assets/icons/gongsi.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_com_ico_open{margin-right:2px; background: url(/assets/icons/gongsi.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}

        .ztree li span.button.icon_dept_ico_docu{margin-right:2px; background: url(/assets/icons/xuexiao.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_dept_ico_close{margin-right:2px; background: url(/assets/icons/xuexiao.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_dept_ico_open{margin-right:2px; background: url(/assets/icons/xuexiao.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}

        .ztree li span.button.icon_pos_ico_docu{margin-right:2px; background: url(/assets/icons/yuangongtongxinlu.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_pos_ico_close{margin-right:2px; background: url(/assets/icons/yuangongtongxinlu.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}
        .ztree li span.button.icon_pos_ico_open{margin-right:2px; background: url(/assets/icons/yuangongtongxinlu.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;background-size: 100% auto;}

        .result-area {
            width: 330px;
        }
        .result-area .layui-table-view {
            border-style: none;
            margin-bottom: 0px;
        }

        .busi-role-view .layui-table-view {
            border-style: none;
            margin-bottom: 0px;
        }

        .org-view {
            display: -webkit-flex; /* Safari */
            display: flex;
            width: 100%;
            align-items:top;
        }
        .emp-list-view {
            flex:1;
            /*border-right: 1px #e6e6e6 solid;*/
        }
        .emp-list-view .layui-table-view {
            border-style: none;
            margin-bottom: 0px;
        }

        .org-tree {
            width: 230px;
            background-color: #ffffff;
            border-right: 1px #e6e6e6 solid;
        }

        .layui-table-page {
            text-align: center;
        }
        .layui-table-page .layui-laypage span {
            margin-left: 6px;
        }
        .switch-button {
            width: 32px;
            padding: 0 10px 0 6px;
            margin-left:0px;
            vertical-align: middle;
        }

        .clear-button {
            width: 36px;
            padding: 0px 0px 1px 1px;
            margin-left:0px;
            vertical-align: middle;
        }

    </style>
	<link th:each="css:${theme.css}" rel="stylesheet" th:href="${css}+'?'+${cacheKey}">
</head>

<body style="overflow:hidden;">


<div class="top-container">
    <div class="source-area" style="padding-top:0px;">
        <div class="layui-tab" lay-filter="sourceTab">
            <ul class="layui-tab-title">
                <li id="org-li" lay-id="org-li">常用</li>
                <li id="pos-li" lay-id="pos-li" class="layui-this">组织架构</li>
                <li id="busi-role-li" lay-id="pos-li" style="display:none;opacity: 0.0">业务角色</li>
            </ul>
            <div class="layui-tab-content" style="height:1000px;padding:0px">
                <!-- 常用 -->
                <div class="layui-tab-item">
                    我的常用人员，待实现...
                </div>

                <!-- 组织架构 -->
                <div class="layui-tab-item layui-show">
                    <div class="org-view">
                        <div class="org-tree">
                            <div class="layui-form toolbar" style="padding:6px; border-bottom:1px #e6e6e6 solid; " id="org-oolbar">
                                <input id="org-search-input" class="layui-input search-input" type="text" placeholder="请输入关键字" style="width: 100%"/>
                            </div>
                            <div id="tree-container" style="overflow:auto;height:800px">
                                <ul id="menu-tree" class="ztree"></ul>
                            </div>
                        </div>
                        <div class="emp-list-view">
                            <div class="layui-form toolbar" style="padding:6px; border-bottom:1px #e6e6e6 solid; " id="emp-toolbar">
                                <input id="emp-search-input" class="layui-input search-input" type="text" placeholder="请输入关键字" style="width: 100%"/>
                            </div>
                            <table class="layui-table" id="emp-table" lay-filter="emp-table" style="margin:0px"></table>
                        </div>
                    </div>
                </div>
                <!-- 流程角色 -->
                <div class="layui-tab-item busi-role-view" style="display:none">
                    <div class="layui-form toolbar" style="padding:6px; border-bottom:1px #e6e6e6 solid; display: flex" id="busi-role-toolbar">
                        <input id="busi-role-search-input" class="layui-input search-input" type="text" placeholder="请输入关键字" style="flex: 1"/>
                    </div>
                    <table class="layui-table" id="busi-role-table" lay-filter="busi-role-table" style="margin:0px"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- 左右按钮 -->
    <div style="width: 48px;display: flex;display: -webkit-flex;flex-direction:column;justify-content:center;">

        <button id="add-employee-item" type="button" class="layui-btn layui-btn-sm layui-btn-primary switch-button" style="margin-left: 8px;margin-bottom: 6px;">
            <i class="layui-icon layui-icon-right"></i>
        </button>
        <button id="remove-result-item" type="button" class="layui-btn layui-btn-sm layui-btn-primary switch-button" style="margin-left: 8px">
            <i class="layui-icon layui-icon-left"></i>
        </button>


    </div>

    <!-- 选择的结果 -->
    <div class="result-area">
        <div class="layui-form toolbar" style="padding:6px; border-bottom:1px #e6e6e6 solid; display: flex" id="result-toolbar">
            <input id="result-search-input" class="layui-input search-input" type="text" placeholder="请输入关键字" style="flex: 1"/>
            <button type="button" id="remove-all-result" class="layui-btn layui-btn-primary clear-button" style="margin-left: 8px;">
                <i class="layui-icon layui-icon-delete" style="font-size: 24px"></i>
            </button>
        </div>
        <table class="layui-table" id="selected-data-table" lay-filter="selected-data-table" style="margin:0px"></table>
    </div>

</div>

<div class="layui-form-item model-form-footer" style="border-top: 1px #e6e6e6 solid;margin-bottom:0px;padding-top: 8px;padding-left: 8px;padding-right:0px">
    <form class="layui-form layui-form-pane" action="" onsubmit="return false;">
        <!--
        <div style="float: left">
            <input type="checkbox" lay-filter="check-mode" id="check-mode" title="关联选择" lay-skin="primary" checked >
        </div>
        -->
        <button class="layui-btn"  id="sure-button" lay-filter="sure-button" lay-submit th:text="${lang.translate('确定')}"  style="margin-right: 24px">确定</button>
    </form>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="selectedToolbarTemplate">
    <div class="layui-btn-container">
        <button th:if="${perm.checkAuth('hrm_employee:create')}" id="add-button" class="layui-btn icon-btn layui-btn-sm create-new-button" lay-event="create"><i class="layui-icon">&#xe654;</i><span th:text="${lang.translate('新建')}">新建</span></button>
        <button th:if="${perm.checkAuth('hrm_employee:delete-by-ids')}" id="delete-button" class="layui-btn icon-btn layui-btn-danger layui-btn-sm batch-delete-button" lay-event="batch-del"><i class="layui-icon">&#xe67e;</i><span th:text="${lang.translate('删除')}">删除</span></button>
    </div>
</script>



<script type="text/javascript" src="/module/global.js" th:src="'/module/global.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/jquery-3.2.1.min.js" th:src="'/assets/libs/jquery-3.2.1.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/toast/js/toast.js" th:src="'/assets/libs/toast/js/toast.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/pandyle.min.js" th:src="'/assets/libs/pandyle.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/layui/layui.js" th:src="'/assets/libs/layui/layui.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js" th:src="'/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js?'+${cacheKey}"></script>

<script src="/business/hrm/employee/dialog/emp_dialog.js" th:src="'/business/hrm/employee/dialog/emp_dialog.js?'+${cacheKey}"></script>

</body>
</html>
